import React, { Component } from 'react'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { createPersonAction } from '../../redux/actions/person'
import { nanoid } from 'nanoid'

class Person extends Component {
    // 添加一个人
    addPreson = ()=>{
        const name = this.nameNode.value
        const age = this.ageNode.value
        console.log(name,age)
        const person = {id:nanoid(),name,age}
        this.props.createPersonAction(person)
    }
    render() {
        return (
            <div>
                <h2>我是Person组件,上方组件的和为:{this.props.countReducer}</h2>
                <input ref={c=>this.nameNode=c}type="text"placeholder="输入名字"/>
                <input ref={c=>this.ageNode=c}type="text" placeholder="输入年龄"/>
                <button onClick={this.addPreson}>添加</button>
                <ul>
                    {
                        this.props.personReducer.map(p =>{
                            return <li key={p.id}>名字{p.name}--年龄{p.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({...state}),
    {
        createPersonAction
    }
)(Person)